<template>
  <div @mouseover="touchState.start()"
        @mouseout.prevent="touchState.cancel()"
       :class="[...classes,...touchState.classes]"
       @touchstart="touchState.start()"
         @touchend="touchState.cancel()" class="basic-button-outer"
       onselectstart="return false;"
       unselectable="on"
       ref="basicButton">
      <span class="basic-button-outer-span" :class="spanClasses">
        <slot></slot>
      </span>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, reactive, ref} from 'vue'

export default defineComponent({
  name: "basic-button",
  props: {
    color: {
      type: String,
      default: 'white',
    },
    hovered: {
      type: [Boolean, String],
      default: 'auto',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false', 'auto'].indexOf(val)>=0)
        } else return typeof val == 'boolean';
      }
    },
    underLine: {
      type: [Boolean, String],
      default: 'auto',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false', 'auto'].indexOf(val)>=0)
        } else return typeof val == 'boolean';
      }
    },
    inverseColor:{
      type: [Boolean, String],
      default: 'false',
      validator(val) {
        if (val == null) return true;
        if (typeof val == "string") {
          return (['true', 'false'].indexOf(val)>=0)
        } else return typeof val == 'boolean';
      }
    },
  },
  setup(props:any) {

    let inverseColor=computed(()=>{
      if(typeof props.inverseColor =="string"){
        return props.inverseColor=="true"
      }else {
        return props.inverseColor
      }
    });
    let underLine=computed(()=>{
      return props.underLine.toString()
    });
    let hovered=computed(()=>{
      return props.hovered.toString()
    });

    const classes = ref<string[]>([]);
    if(!inverseColor.value){
      classes.value.push('basic-button-outer-'+props.color)
      if ( hovered.value !== 'auto') {
        if(hovered.value == 'true')classes.value.push('basic-button-hover');
      }else {
        classes.value.push('basic-button-hover-auto')
      }
    }else {
      classes.value.push('basic-button-outer-inverse')
      if ( hovered.value !== 'auto') {
        if(hovered.value == 'true')classes.value.push('basic-button-hover')
      }else {
        classes.value.push('basic-button-hover-auto')
      }
    }

    const spanClasses=computed(()=>{
      if(underLine.value=='true'){
        return ['basic-button-outer-span-underline'];
      }else if(underLine.value=='false'){
        return ['basic-button-outer-span-no-underline'];
      }else {
        return []
      }
    })

    const touchState=reactive({
      classes:[],
      start(){
        if(hovered.value == 'auto'){
          touchState.classes.push('basic-button-hover-auto-hover');
        }
      },
      cancel(){
        touchState.classes=[];
      }
    })

    return {
      classes,
      touchState,
      spanClasses
    }
  }
})
</script>

<style scoped lang="less">
@import url('../../styles/basicStyle.less');

.basic-button-hover{
  border-radius: 50vw;
  &.basic-button-outer-white{
    color: #1677ff;
    background-color: #f5f5f5;
  }
  &.basic-button-outer-inverse {
    color: white;
    background-color: #1677ff;
  }
  .basic-button-outer-span {
    padding-bottom: 1px;
    border-bottom: #1677ff solid 1px;
  }
}

.basic-button-outer-span-underline{
  border-bottom: #1677ff solid 1px;
}
.basic-button-outer-span-no-underline{
  border-bottom: 0!important;
}

.basic-button-hover-auto{
}
//
//.basic-button-hover-auto:hover{
//
//  -webkit-transform: scale(1);
//  -ms-transform: scale(1);
//  transform: scale(1);
//
//  &.basic-button-outer-white{
//    color: #1677ff;
//    background-color: #f5f5f5;
//  }
//  &.basic-button-outer-inverse{
//    color:  #f5f5f5;
//    background-color: #5f115f;
//  }
//
//  .basic-button-outer-span {
//    padding-bottom: 1px;
//    border-bottom: #1677ff solid 1px;
//  }
//}
.basic-button-hover-auto-hover{

  -webkit-transform: scale(1)!important;
  -ms-transform: scale(1)!important;
  transform: scale(1)!important;

  &.basic-button-outer-white{
    color: #1677ff;
    background-color: #f5f5f5;
  }
  &.basic-button-outer-inverse{
    color:  #f5f5f5;
    background-color: #5f115f;
  }

  .basic-button-outer-span {
    padding-bottom: 1px;
    border-bottom: #1677ff solid 1px;
  }
}

.basic-button-outer {
  //height: @main-font-size;
  line-height: @main-font-size;
  display: inline-block;
  padding: 12px;
  font-size: @main-font-size;
  cursor:pointer;


  box-sizing: border-box;

  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);


  border-radius: 50vw;
  -webkit-transition: -webkit-transform .22s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: -webkit-transform .22s cubic-bezier(.22, .61, .36, 1);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1);


  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.basic-button-outer-white {
  color: black;
  background-color: white;
}
.basic-button-outer-inverse {
  color: white;
  background-color: #1677ff;
}

</style>
